<template>
  <div class="fd_charge">
    <div class="nav u-flex-bet">
      <div class="back" @click="goRouter(1)">
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/fdCharge/back@2x.png')"
        />
      </div>

      <div class="home" @click="goRouter(2)">
        <van-image
          width="44rem"
          height="44rem"
          :src="require('@/assets/images/fdCharge/icon_home@2x.png')"
        />
      </div>
    </div>

    <div class="top"></div>

    <div class="bg">
      <van-image
        class="level-text"
        width="384rem"
        height="88rem"
        :src="require('@/assets/images/jdCharge/photo@2x.png')"
      />

      <div class="tips-box">开通接单等级权益</div>

      <van-image
        class="bg-img"
        width="328rem"
        height="330rem"
        :src="require('@/assets/images/fdCharge/bg.png')"
      />
    </div>

    <div class="level-box">
      <div class="vip">
        <van-image
          width="372rem"
          height="132rem"
          :src="require('@/assets/images/fdCharge/picture2@2x.png')"
        />
      </div>
      <div class="main u-flex-bet">
        <div class="title-box">
          <div class="title">{{ name }}</div>
          <div class="level">
            <span>当前等级</span>
            <span>LV.{{ level }}</span>
          </div>
        </div>

        <div class="level-icon">
          <van-image
            width="112rem"
            height="112rem"
            :src="require('@/assets/images/jdCharge/icon_3@2x.png')"
          />
        </div>
      </div>
    </div>

    <div class="list-box">
      <div class="title">接单等级选择</div>

      <div class="list">
        <div
          class="item u-flex"
          v-for="(item, index) in issueLevelList"
          v-if="index <= curId"
          :class="selectIndex == index ? 'select' : ''"
        >
          <div class="icon">
            <van-image
              width="112rem"
              height="112rem"
              :src="
                require('@/assets/images/jdCharge/icon_' +
                  (index + 1) +
                  '@2x.png')
              "
            />
          </div>

          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="day">
              可接金额
              <span>{{ item.min }}~{{ item.max }}</span>
            </div>
            <div class="money">
              需要
              <span>{{ item.amount }}</span>
              众币
            </div>
          </div>

          <div class="change u-flex-center" v-if="radio == index">
            <!-- <van-image
              width="28rem"
              height="28rem"
              :src="require('@/assets/images/fdCharge/icon_4@2x(2).png')"
            /> -->
          </div>
        </div>
      </div>

      <div class="list">
        <div
          class="item u-flex"
          v-for="(item, index) in issueLevelList"
          v-if="index > curId"
          @click="selects(index)"
          :class="selectIndex == index ? 'select' : ''"
        >
          <div class="icon">
            <van-image
              width="112rem"
              height="112rem"
              :src="
                require('@/assets/images/jdCharge/icon_' +
                  (index + 1) +
                  '@2x.png')
              "
            />
          </div>

          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="day">
              可接金额
              <span>{{ item.min }}~{{ item.max }}</span>
            </div>
            <div class="money">
              需要
              <span>{{ item.amount }}</span>
              众币
            </div>
          </div>

          <div class="change u-flex-center" v-if="selectIndex == index">
            <van-image
              width="28rem"
              height="28rem"
              :src="require('@/assets/images/fdCharge/icon_4@2x(2).png')"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="buy-box u-flex-bet">
      <div class="price">
        <span>需要支付:</span>
        <span>{{ all }}众币</span>
      </div>

      <div>
        <div class="btn u-flex-center" v-show="shows" @click="levelget">
          去支付
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  Uploader,
  sticky,
  Form,
  Radio,
  RadioGroup,
} from "vant";
import { API_PATH } from "@/api/index.js";
import {
  BIND_ACCOUNT,
  TASK_PUBLISH,
  ISSUE_BUY,
  TASK_GETLEVRL,
  ACCEPT_BUY,
} from "@/api/api.js";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(sticky);
Vue.use(Form);
Vue.use(Radio);
Vue.use(RadioGroup);
export default {
  name: "jdCharge",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      payee_name: "",
      payee_account: "",
      radio: 3,
      img: require("../.././assets/images/alipay.png"),
      // 发单等级
      issueLevelList: [],
      curId: "",
      amount: 0,
      all: 0,
      new: "",
      shows: true,
      name: "",
      level: 0,
      selectIndex: 3,
    };
  },
  created() {
    this.getInfo();
  },
  mounted() {
    this.level = Number(this.$route.query.level);
    this.name = this.$route.query.name;
  },
  methods: {
    // 选择
    selects(index) {
      let now = this.curId + 1;
      let all = 0;
      for (let j = now; j <= index; j++) {
        all += this.issueLevelList[j].amount;
      }
      this.all = all;
      this.new = index;
      this.selectIndex = index;
    },
    // 充值等级
    async levelget() {
      let oldid = this.issueLevelList[this.curId].level_id;
      let target = this.issueLevelList[this.new].level_id;
      let newid;
      newid = this.issueLevelList[this.new].level_id;

      let amount = this.all;
      console.log(this.new);
      let datas = {
        current: oldid,
        buy: newid,
        amount: amount,
      };

      const { data } = await this.$reqPost(ACCEPT_BUY, datas);
      let that = this;
      if (data.status == 1) {
        Toast(data.info);
        that.$router.push("home");
      } else {
        Toast(data.info);
        this.show = false;
      }
    },
    // 获取配置
    async getInfo() {
      const { data } = await this.$reqGet(TASK_GETLEVRL, {});
      if (data.status == 1) {
        let datas = data.data.acceptList;

        for (let i = 0; i < datas.length; i++) {
          if (datas[i].current == true) {
            if (i == datas.length - 1) {
              this.curId = i;
              this.shows = false;
            } else {
              this.curId = i;
              this.radio = i + 1;
              this.all = datas[i + 1].amount;
              this.new = i + 1;
            }
          }
        }
        this.issueLevelList = datas;
      }
    },

    goRouter(b) {
      console.log(b);
      if (b == 1) {
        this.$router.goBack();
      } else {
        this.$router.push("home");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.fd_charge {
  text-align: left;
  padding-bottom: 164rem;
  font-size: 28rem;

  .nav {
    position: fixed;
    width: 100%;
    left: 0;
    padding: 24rem;
    z-index: 99;
    padding-top: 24rem;
    background-color: #1e2039;
  }

  .top {
    height: 88rem;
  }

  .bg {
    height: 392rem;
    background-color: #1e2039;
    padding: 0 24rem;
    position: relative;

    .level-text {
      margin-top: 54rem;
    }

    .tips-box {
      margin-top: 24rem;
      font-size: 28rem;
      color: #f3cd89;
    }

    .bg-img {
      position: absolute;
      bottom: 40rem;
    }
  }

  .level-box {
    position: relative;
    border-radius: 20rem;
    height: 200rem;
    padding: 0 48rem;
    background: linear-gradient(309deg, #f0cb8b 0%, #ffecc4 100%);
    margin: -80rem 24rem 0;

    .vip {
      position: absolute;
      right: 96rem;
      bottom: 0;
    }

    .main {
      position: relative;

      .title-box {
        margin-top: 44rem;

        .title {
          font-size: 44rem;
          font-weight: bold;
          margin-bottom: 8rem;
        }

        .level {
          font-size: 28rem;

          span {
            &:last-child {
              margin-left: 8rem;
            }
          }
        }
      }

      .level-icon {
        margin-top: 36rem;
      }
    }
  }

  .list-box {
    margin-top: 24rem;
    padding: 0 24rem;

    .title {
      font-size: 32rem;
      font-weight: bold;
      margin-bottom: 24rem;
    }

    .item {
      position: relative;
      background-color: #f8f8f8;
      border-radius: 20rem;
      padding: 36rem 48rem;
      margin-bottom: 24rem;
      box-sizing: border-box;

      .info {
        margin-left: 48rem;

        .name {
          font-size: 32rem;
          font-weight: bold;
          margin-bottom: 8rem;
        }

        .money,
        .day {
          color: #999;

          span {
            color: #ff4343;
          }
        }
      }

      .change {
        z-index: 99;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #f3cd89;
        border-radius: 20rem 0px 20rem 0px;
        width: 44rem;
        height: 44rem;
      }
    }

    .select {
      background-color: #fdf8ee;
      border: 4rem solid #f3cd89;
    }
  }

  .buy-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0 24rem;
    height: 164rem;
    background-color: #fff;
    align-items: flex-start;
    box-shadow: 0px -4rem 20rem rgba(88, 88, 88, 0.1);

    .price {
      margin-top: 32rem;
      span {
        &:nth-child(1) {
          font-size: 24rem;
          color: #66696e;
        }

        &:nth-child(2) {
          margin-left: 10rem;
          color: #ff4343;
          font-size: 32rem;
        }
      }
    }

    .btn {
      width: 220rem;
      height: 88rem;
      background: linear-gradient(306deg, #f0cb8b 0%, #ffecc4 100%);
      font-size: 32rem;
      font-weight: bold;
      border-radius: 44rem;
      margin-top: 10rem;
    }
  }
}
</style>
